<template>
	<view>
		<view class="grid">
				<image class="grid-item" v-for="item in pictures" :id="item.id" @click="preview(item.url)" :src="item.url" mode="widthFix"></image>

		</view>
<!-- 		<view class="upload">
			<uni-icons type="upload" color="#161412" size="36rpx"></uni-icons>
			<text space="ensp">我来发布一张</text>
		</view> -->
		
		<view style="height: 90rpx; text-align: center; ">
			<text style="font-size: 24rpx; color: #808080;">~~没有啦～～</text>
			
		</view>

	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components:{uniIcons},
		data() {
			return {
				id: 0,
				status: '',
				pictures: []
			}
		},
		methods: {
			init() {
				var that = this
				var status = that.status
				if (status === 'detail') {
					this.get('product/getAllDetailPictures/' + that.id, null, (res) => {
						that.pictures = res.data.list
					})
				}
			},
			preview(current) {
				var urls = []
				for(var i = 0; i < this.pictures.length; i++){
					urls = [...urls, this.pictures[i].url]
				}
				uni.previewImage({
					current,
					urls
				})
			} 
		},
		onLoad(opt) {
			this.id = opt.id
			this.status = opt.status
			this.init()
		}
	}
</script>

<style lang="scss">
	.grid {
		display: flex;
		flex-wrap: wrap;
		.grid-item {
			width: calc(50% - 20rpx);
			margin: 10rpx;
		}
	}
	// .upload {
	// 	background-color: $uni-color-warning;
	// 	font-size: $uni-font-size-lg;
	// 	font-weight: 900;
	// 	width: 100%;
	// 	position: fixed;
	// 	bottom: 0rpx;
	// 	right: 0rpx;
	// 	text-align: center;
	// 	padding: 40rpx 0;
	// 	color: $uni-text-color;
	// }
</style>
